<template>
    <myDisplayWrap breadcrumbs="基础信息">
        <a-row class="userBox">
            <div class="titleBar">基础信息</div>
            <a-col :span="16" :offset="2">
                <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item label="头像:" class="clearMB">
                        <div class="userUpload">
                            <a-upload name="file" accept=".jpg,.png" listType="picture-card" class="avatar-uploader"
                                :showUploadList="false" :action="uploadPath" :headers="headers" :beforeUpload="beforeUpload"
                                @change="handleChange">
                                <img v-if="imageUrl" :src="imageUrl" class="imgAvatar" alt="file" />
                                <div v-else>
                                    <a-icon :type="loading ? 'loading' : 'plus'" />
                                    <div class="ant-upload-text">Upload</div>
                                </div>
                            </a-upload>
                            <span class="sizeAvt">注:点击头像可上传新头像</span>
                        </div>
                    </a-form-model-item>
                    <a-row class="redMFont">只能上传2M以内的jpg格式图片</a-row>

                    <a-form-model-item ref="userName" label="姓名:" prop="userName">
                        <a-input placeholder="请输入姓名" v-model="form.userName"
                            @blur="() => { $refs.userName.onFieldBlur(); }" />
                    </a-form-model-item>
                    <a-form-model-item label="邮箱:" ref="email" prop="email">
                        <a-input placeholder="请输入邮箱" v-model="form.email" @blur="() => { $refs.email.onFieldBlur(); }" />
                    </a-form-model-item>



                    <table style="margin-left: 60px">
                        <tr>
                            <td>工号：</td>
                            <td>{{ form.jobNo }}</td>
                        </tr>
                        <tr>
                            <td>手机：</td>
                            <td>{{ form.mobile }}</td>
                        </tr>
                        <tr>
                            <td>所属部门：</td>
                            <td>{{ form.deptNameList }}</td>
                        </tr>
                    </table>
                    <a-form-model-item label>
                        <a-col :offset="7" :span="11" style="margin-top:20px;margin-left:200px">
                            <a-button type="primary" @click="submitForm">保存</a-button>
                        </a-col>
                    </a-form-model-item>
                </a-form-model>
            </a-col>
        </a-row>
    </myDisplayWrap>
</template>
  
<script>
import myDisplayWrap from './components/myDisplayWrap.vue'
import { appConfig } from '@/config/app'
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
    components: {
        myDisplayWrap
    },
    data() {
        return {
            uploadPath:
                appConfig.microServ +
                appConfig.microServModules.sysrest +
                "api/basic/uploadImage",
            headers: {
                Authorization: "Bearer " + sessionStorage.getItem("token")
            },
            form: {
                userName: "",
                mobile: "",
                email: "",
                deptName: "",
                deptType: "",
                jobNo: ""
            },
            rules: {
                userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
                //mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
                email: [
                    { required: true, message: "请输入邮箱", trigger: "blur" },
                    {
                        pattern: this.validators.rules().emailReg,
                        message: "邮箱格式不正确"
                    }
                ]
            },
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            imageUrl: '',
            loading: false
        }
    },
    mounted() {

    },
    methods: {
        beforeUpload(file) {
            const isJpgOrPng =
                file.type === "image/jpeg" || file.type === "image/png";
            if (!isJpgOrPng) {
                this.$message.error("只能上传jpg、png类型的照片!");
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error("只能上传2m以内的图片!");
            }
            return isJpgOrPng && isLt2M;
        },
        handleChange(info) {
            if (info.file.status === "uploading") {
                this.loading = true;
                return;
            }
            if (info.file.status === "done") {
                // Get this url from response in real world.
                getBase64(info.file.originFileObj, imageUrl => {
                    this.imageUrl = imageUrl;
                    this.loading = false;
                });
            }
        },
        submitForm() {
            let params = {
                userName: this.form.userName,
                email: this.form.email
            };
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    // this.$http
                    //   .post(
                    //     appConfig.microServModules.sysrest + "api/basic/update",
                    //     params
                    //   )
                    //   .then(response => {
                    //     //this.form = response.data.data;
                    //     this.$eventHub.$emit("updateUserName", params.userName);
                    //     this.$message.success("保存成功");
                    //     this.reload();
                    //   })
                    //   .catch(error => {
                    //     console.log(error);
                    //   });
                } else {
                    return false;
                }
            });
        }
    },
    watch: {

    }
}
</script>
  
<style lang="scss" scoped>
.userBox {
  padding: 0 24px;
  border-left: 4px solid #cccccc54;
  margin-left: -1px;
  min-height: 650px;
}
.titleBar {
  width: 100%;
  height: 50px;
  line-height: 30px;
  padding: 10px;
  margin-bottom: 20px;
  background: #fff;
  border-bottom: 1px dashed #ccc;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.sizeAvt {
  margin-bottom: 10px;
}
.imgAvatar {
  width: 120px;
}
.userUpload .ant-upload-picture-card-wrapper {
  width: auto !important;
}
.redMFont {
  color: red;
  margin-left: 101px;
}
</style>
  